{% extends 'layout/basic.html' %}
{% load static %}
{% block css %}
    <link rel="stylesheet" href="{% static 'css/login_box.css' %}">
{% endblock %}
{% block cotent %}
    <div class="login_box clearfix">
        <form id="form_msglogin" novalidate>
            {% csrf_token %}
            <h3 style="text-align: center">{{ title }}</h3>
            {% for item in form %}
                {% if item.name == "code" %}
                    <div class="form-group" style="margin-bottom: 23px">
                        <label for="exampleInputEmail1">{{ item.label }} :</label>
                        <div class="clearfix">
                            <div class="col-xs-6" style="padding-left: 0">{{ item }}</div>
                            <div class="col-xs-6"><input id="btn_code" class="btn btn-sm btn-default" type="button"
                                                         value="获取验证码"></div>
                            <div class="col-xs-12" style="padding-left: 0"><span id="code_error" class="error"
                            > {{ item.errors.0 }}</span>
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div class="form-group" style="margin-bottom: 23px">
                        <label for="exampleInputEmail1">{{ item.label }} :</label>
                        {{ item }}
                        <span class="error"> {{ item.errors.0 }}</span>
                    </div>
                {% endif %}
            {% endfor %}
            <div>
                <a href="/paslogin">密码登录</a>
                <input id="btn_login" style="float: right" type="button" class="btn btn-success" value="登录"></div>
        </form>
    </div>
    <script src="{% static 'js/jquery-3.5.1.js' %}"></script>
    <script>
        $(function () {
            getcode();
            sub_login();
        })

        function getcode() {
            var time = 60
            $("#btn_code").click(function () {
                console.log("点击了");
                $.ajax({
                    url: "/goto/?type=login",
                    type: "get",
                    dataType: "JSON",
                    data: {
                        mobile_phone: $("#id_mobile_phone").val()
                    },
                    success: function (res) {
                        console.log(res)
                        if (res.status) {
                            $("#btn_code").attr("disabled", true);
                            $("#btn_code").val('还剩' + time + '秒'); //解决点了按钮之后的延迟
                            var timer = setInterval(function () {
                                if (time == 1) {
                                    clearInterval(timer);
                                    $("#btn_code").attr("disabled", false);
                                    $("#btn_code").val('发送');
                                    time = 60;
                                } else {
                                    $("#btn_code").val('还剩' + (time - 1) + '秒');
                                    time--;
                                }
                            }, 1000);
                        } else {
                            $.each(res.msg, function (name, msg) {
                                $("#id_" + name).next().text(msg)
                            })
                        }
                    }
                })
            })
        }

        function sub_login() {
            $("#btn_login").click(function () {
                $(".error").empty()
                $.ajax({
                    url: "/msglogin/",
                    type: "post",
                    dataType: "JSON",
                    data: $("#form_msglogin").serialize(),
                    success: function (res) {
                        if (res.status) {
                            location.href = res.msg; //登录成功就跳转index
                        } else {
                            $.each(res.msg, function (name, msg) { // 因为验证码的错误信息展示div不在一起所以做个判断
                                if (name == "code") {
                                    $("#code_error").text(msg)
                                } else {
                                    $("#id_" + name).next().text(msg)
                                }
                            })
                        }
                    }
                })

            })
        }
    </script>
{% endblock %}